<template>
	<view class="container">
		<view class="top">
			<view><text>欢迎登录</text></view><br>
			<view><text>在线考试App</text></view>
		</view>

		<view class="center">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="学号" name="name">
					<uni-easyinput v-model="valiFormData.name" placeholder="请输入学号" />
				</uni-forms-item>
				<uni-forms-item label="密码" name="password">
					<uni-easyinput v-model="valiFormData.password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item label="验证码" name="code">
					<uni-easyinput v-model="valiFormData.code" placeholder="请输入验证码" />
				</uni-forms-item>
				<view class="captcha-container">
					<text class="captcha">{{ captcha }}</text>
					<button @click="generateCaptcha">刷新验证码</button>
				</view>
			</uni-forms>
			<view class="anniu">
				<button class="an222" @click="handleLogin('valiForm')">登 录</button>
			</view>
			<view class="an333" @click="wj">忘记密码?</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '学号不能为空'
							},
							{
								minLength: 1, // 最小长度
								maxLength: 12, // 最大长度12位
								errorMessage: '学号长度不能超过12位'
							}
						]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}, {
							minLength: 6,
							maxLength: 10,
							errorMessage: '密码最小六位最大十位'
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '验证码不能为空'
						}]
					}
				},
				valiFormData: {
					name: '',
					password: '',
					code: '',
				},
				captcha: '', // 验证码字段
				// storedUserInfo: null, //新增：用于存储从localStorage获取的用户信息
			}
		},
		onLoad() {
			this.generateCaptcha();
		},
		methods: {
			generateCaptcha() {
				// 生成一个6位随机数字验证码  
				this.captcha = Math.floor(100000 + Math.random() * 900000).toString();
			},
			handleLogin(ref) {
				this.$refs[ref].validate().then(res => {
						// 验证验证码是否正确
						if (this.valiFormData.code !== this.captcha) {
							uni.showToast({
								title: '验证码错误',
								icon: 'none'
							});
							return;
						}
						
						// 存储学号到本地
						uni.setStorageSync('userId', this.valiFormData.name);
						const userInfo = {
							username: this.valiFormData.name,
							isLogin: true
						};
						uni.setStorageSync('userInfo', JSON.stringify(userInfo));
						 uni.setStorageSync('userId', this.valiFormData.name); // 保存学号
						uni.showToast({
							title: '登录成功'
						});

						// 跳转到首页
						uni.reLaunch({
							url: "/pages/shouye/shouye"
						});
				}).catch(err => {
				console.log('表单验证失败', err);
			});
		}
	},
	wj() {
		uni.navigateTo({
			url: "/pages/register/register"
		})
	},
	}
</script>

<style>
	.container {
		background-image: url('../../static/image/bj.png');
		/* background-color: rgba(0, 100, 150, 0.2); */
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		width: 100vw;
		height: 94vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.top {
		text-align: center;
		color: #49678c;
		margin-bottom: 200px;
		font-size: 35px;
		font-weight: bold;
	}

	.center {
		margin-top: -480px;
		width: 300px;
		padding: 20px;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.uni-forms-item {
		margin-bottom: 20px;
		padding-left: 20px;
	}

	.uni-easyinput {
		margin-left: -20px;
		width: 220px;
	}

	.anniu {
		display: flex;
		gap: 15px;
		margin-top: 20px;
	}

	.an222 {
		width: 300px;
		height: 45px;
		line-height: 45px;
		font-weight: bold;
		color: white;
		font-size: 18px;
		border-radius: 8px;
		border: none;
		cursor: pointer;
		transition: background-color 0.3s ease;
		background-color: skyblue;
		margin-left: -2px;
	}

	.an333 {
		text-align: right;
		margin-top: 5rpx;
	}

	.captcha-container {
		display: flex;
		width: 260px;
		height: 35px;
		margin-left: 20px;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 5px;
	}

	.captcha {
		width: 120px;
		font-size: 20px;
		color: #333;
		text-align: center;
		line-height: 35px;
		border-radius: 5px;
		border: 1px solid #19222c;
	}

	.captcha-container button {
		line-height: 35px;
		margin-right: -8px;
	}
</style>